<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <video id="video" width="765" height="430" controls src="E522_E062_0711QV_001.R3D"></video>
        <div class="speed">
            <div class="speed-bar">
                1x
            </div>
        </div>
    </div>

    <script>
        //随着彩色容器高度的变化，控制视频播放速度
        //鼠标在白色容器上滑动，带来彩色容器的高度变化
        //在白色容器上监听到鼠标的移动

        const speed = document.querySelector('.speed')
        const speedBar = document.querySelector('.speed-bar')
        const video = document.getElementById('video')


        speed.addEventListener('mousemove',(e) => {
            const y = e.pageY - speed.offsetTop
            
            const percent = y/speed.offsetHeight
            const height = Math.round(percent * 100)+'%'
            speedBar.style.height = height

            const min = 0.4
            const max = 4
            const playbackRate = percent*(max - min)+min

            speedBar.textContent = playbackRate.toFixed(2)+'x'

            video.playbackRate = playbackRate
        })
    </script>
</body>
</html>